<template>
<div>
    <div id="goods">
        <div class="menu-wraper" ref="menuWrapper">
            <ul>
                <li v-for="(val,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index
                ,$event)">
                    <span class="text border-1px">
                        <span v-show="val.type>0" class="icon" :class="classMap[val.type]"></span>
                        {{val.name}}
                    </span>
                </li>
            </ul>
        </div>

        <div class="foods-wraper" ref="foodsWrapper">
          <ul>
            <li v-for="item in goods" class="food-list" ref="foodList">
              <h1 class="title">{{item.name}}</h1>
              <ul>
                <li  v-for="food in item.foods" class="food-item border-1px">
                  <div class="icon">
                    <img width="57" height="57" :src="food.icon">
                  </div>
                  <div class="content">
                    <h2 class="name">{{food.name}}</h2>
                    <p class="desc">{{food.description}}</p>
                    <div class="extra">
                      <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                    </div>
                    <div class="price">
                      <span class="now">￥{{food.price}}</span>
                      <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                    </div>

                    <div class="cart-wrapper">
                    <cart-control :food="food"></cart-control>
                    </div>
                    
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      
      <!---->
      <shop-cart :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shop-cart>
    </div>
    
  </div>
    
    </div>
</div>
</template >

<script src="./goods.js"></script>

<style lang='stylus' rel='stylesheet/stylus'>
	@import './goods.styl'
</style>